<template>
  <a-modal
    :title="`活动城市${model ? '编辑' : '新增'}`"
    :width='640'
    :visible='visible'
    :confirmLoading='loading'
    @ok='handleOk'
    @cancel='handleCancel'
  >
    <a-spin :spinning='loading'>
      <a-form :form='form' v-bind='formLayout'>
        <a-form-item v-show='false' label='主键ID'>
          <a-input v-decorator="['id']" disabled />
        </a-form-item>
        <a-form-item label='请选择省'>
          <a-select v-decorator="['provinceid']" placeholder='请选择省' @change='onProvinceChange'>
            <a-select-option :value='item.provinceid' v-for='item in provinceList' :key='item.id'>{{
                item.province
              }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label='请选择市'>
          <a-select v-decorator="['cityid']" placeholder='请选择市'>
            <a-select-option :value='item.cityid' v-for='item in cityList' :key='item.id'>{{
                item.city
              }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { provinceLink, cityLink } from '@/api/notControl'
import { clothesActivityCityAdd, clothesActivityCityEdit } from '@/api/activity'
import formModalMixin from '@/mixins/formModalMixin'
// 表单字段
const fields = ['provinceid', 'cityid']

export default {
  mixins: [formModalMixin],
  props: {
    extraPramas: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    this.fields = fields
    this.addAction = clothesActivityCityAdd
    this.editAction = clothesActivityCityEdit
    return {
      provinceList: [],
      cityList: []
    }
  },
  created() {
    provinceLink().then(res => {
      this.provinceList = res.data
    })
  },
  methods: {
    watchBefore(model) {
      const { provinceid, cityid } = model
      return Promise.all([this.onProvinceChange(provinceid)])
    },
    // onCityChange (cityid) {
    //   return areaLink({ cityid }).then(res => {
    //     this.areaList = res.data
    //   })
    // },
    onProvinceChange(provinceid) {
      return cityLink({ provinceid }).then(res => {
        this.cityList = res.data
        this.form.setFieldsValue({ cityid: undefined })
      }).finally(err => {
        this.loading = false
      })
    },
    handleOkBefore(values) {
      const province = this.provinceList.find(province => province.provinceid === values['provinceid'])
      const city = this.cityList.find(city => city.cityid === values['cityid'])
      const params = {
        ...values,
        ...this.extraPramas,
        id:this.model && this.model.id,
        province: (province && province.province) || undefined,
        city: (city && city.city) || undefined,
        provinceid: values['provinceid'],
        cityid: values['cityid'],
        areaid: values['areaid']
      }
      return params
    }
  }
}
</script>
<style lang='less' scoped>
/deep/ .ant-modal-body {
  padding: 24px 48px;
}
</style>
